<template>
  <div ref="containerRef" class="particle-background"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'

const containerRef = ref<HTMLElement>()
let scene: THREE.Scene
let camera: THREE.PerspectiveCamera
let renderer: THREE.WebGLRenderer
let particles: THREE.Points
let animationId: number
let mouse = { x: 0, y: 0 }

const initThreeJS = () => {
  if (!containerRef.value) return

  // 场景设置
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
  
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  containerRef.value.appendChild(renderer.domElement)

  // 创建粒子系统
  createParticles()
  
  // 设置相机位置
  camera.position.z = 5

  // 添加鼠标移动监听
  window.addEventListener('mousemove', onMouseMove)
  window.addEventListener('resize', onWindowResize)
  
  // 开始动画循环
  animate()
}

const createParticles = () => {
  const particleCount = window.innerWidth < 768 ? 100 : 200
  const geometry = new THREE.BufferGeometry()
  const positions = new Float32Array(particleCount * 3)
  const colors = new Float32Array(particleCount * 3)
  
  // 定义渐变色
  const color1 = new THREE.Color(0x0A0E27)
  const color2 = new THREE.Color(0x1E293B)
  const color3 = new THREE.Color(0x64748B)
  
  for (let i = 0; i < particleCount; i++) {
    const i3 = i * 3
    
    // 随机位置
    positions[i3] = (Math.random() - 0.5) * 20
    positions[i3 + 1] = (Math.random() - 0.5) * 20
    positions[i3 + 2] = (Math.random() - 0.5) * 10
    
    // 渐变颜色
    const mixRatio1 = Math.random()
    const mixRatio2 = Math.random()
    const color = color1.clone().lerp(color2, mixRatio1).lerp(color3, mixRatio2)
    
    colors[i3] = color.r
    colors[i3 + 1] = color.g
    colors[i3 + 2] = color.b
  }
  
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
  
  const material = new THREE.PointsMaterial({
    size: 2,
    vertexColors: true,
    transparent: true,
    opacity: 0.6,
    blending: THREE.AdditiveBlending
  })
  
  particles = new THREE.Points(geometry, material)
  scene.add(particles)
}

const onMouseMove = (event: MouseEvent) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
}

const onWindowResize = () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}

const animate = () => {
  animationId = requestAnimationFrame(animate)
  
  if (particles) {
    // 粒子跟随鼠标移动
    particles.rotation.x += 0.001
    particles.rotation.y += 0.002
    
    // 鼠标交互效果
    particles.rotation.x += mouse.y * 0.0005
    particles.rotation.y += mouse.x * 0.0005
    
    // 粒子位置动画
    const positions = particles.geometry.attributes.position.array as Float32Array
    for (let i = 0; i < positions.length; i += 3) {
      positions[i + 1] += Math.sin(Date.now() * 0.001 + positions[i]) * 0.001
    }
    particles.geometry.attributes.position.needsUpdate = true
  }
  
  renderer.render(scene, camera)
}

onMounted(() => {
  initThreeJS()
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('mousemove', onMouseMove)
  window.removeEventListener('resize', onWindowResize)
  
  if (renderer) {
    renderer.dispose()
  }
})
</script>

<style scoped>
.particle-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.particle-background canvas {
  display: block;
}
</style>